<template>
  <div class="create-account-container">
    <h2 class="page-title">创建管理员账户</h2>
    <el-form 
      :model="adminForm" 
      :rules="rules" 
      ref="formRef" 
      label-width="120px" 
      class="admin-form"
      autocomplete="off"
      size="large"
    >
      <el-form-item label="名称" prop="maName">
        <el-input 
          v-model="adminForm.maName" 
          placeholder="请输入管理员姓名" 
          autocomplete="off"
          size="large"
        />
      </el-form-item>
      
      <el-form-item label="账号" prop="maAccount">
        <el-input 
          v-model="adminForm.maAccount" 
          placeholder="请输入账号" 
          autocomplete="off"
          size="large"
        />
      </el-form-item>
      
      <el-form-item label="密码" prop="maPassword">
        <el-input 
          v-model="adminForm.maPassword" 
          type="password" 
          placeholder="请输入密码" 
          autocomplete="new-password"
          size="large"
        />
      </el-form-item>
      
      <el-form-item>
        <div class="button-container">
          <el-button @click="returnToMenu" class="form-button return-button" size="large">返回管理</el-button>
          <el-button @click="resetForm" class="form-button" size="large">重置信息</el-button>
          <el-button type="primary" @click="submitForm" class="form-button" size="large">创建账户</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElForm } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

// 定义表单数据
const adminForm = reactive({
  maName: '',
  maAccount: '',
  maPassword: ''
})

// 定义表单验证规则
const rules = reactive<FormRules>({
  maName: [
    { required: true, message: '请输入管理员姓名', trigger: 'blur' }
  ],
  maAccount: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  maPassword: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
})

// 表单引用
const formRef = ref<FormInstance>()
// 从localStorage获取token
const token = localStorage.getItem('token')
// 提交表单
const submitForm = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const response = await fetch('http://localhost:8080/manager/create', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'token': token || ''
          },
          body: JSON.stringify(adminForm)
        })
        
        if (response.ok) {
          ElMessage.success('管理员账户创建成功')
          resetForm()
        } else {
          ElMessage.error('创建失败: ' + await response.text())
        }
      } catch (error) {
        ElMessage.error('网络错误: ' + (error as Error).message)
      }
    }
  })
}

// 重置表单
const resetForm = () => {
  formRef.value?.resetFields()
}

// 添加返回菜单的方法
const returnToMenu = () => {
  // 使用事件总线通知父组件返回菜单
  const event = new CustomEvent('navigate-to-menu')
  window.dispatchEvent(event)
}

</script>

<style scoped>
.create-account-container {
  max-width: 580px;
  margin: 50px auto;
  padding: 30px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.page-title {
  font-size: 28px;
  text-align: center;
  margin-bottom: 30px;
  color: #303133;
}

.admin-form {
  margin-top: 20px;
}

.el-form-item {
  margin-bottom: 25px;
}

:deep(.el-form-item__label) {
  font-size: 16px;
  font-weight: 500;
}

.button-container {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 10px;
}

.form-button {
  flex: 1;
  max-width: 160px;
  font-size: 16px;
  padding: 12px 20px;
}

.return-button {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: white !important;
}

.return-button:hover {
  background-color: #5a6268 !important;
  border-color: #545b62 !important;
}
</style>
